<script lang="ts" setup>
import { reactive, ref } from "vue";
import { JxtechSearchForm, JxtechSearchFormColumn, useJxtechSearchForm, JxtechSearchFormProps } from "@whjxtech/jxtech-component";
import { commonList } from "@/api/modules/org/code-list";

const props = defineProps<JxtechSearchFormProps>();

const SerachFormRef = ref();
const { searchForm, resetForm } = useJxtechSearchForm(SerachFormRef);

//我们来处理一下下拉选择功能

const SearchFormState = reactive({
  slotArr: [] as string[],
  resQueryColumn: [] as JxtechSearchFormColumn[][],
  isTdArray(columns: JxtechSearchFormColumn[] | JxtechSearchFormColumn[][]) {
    return columns.some((item: any) => Array.isArray(item));
  },
  init() {
    if (SearchFormState.isTdArray(props.queryColumn)) {
      SearchFormState.resQueryColumn = props.queryColumn as JxtechSearchFormColumn[][];
    } else {
      SearchFormState.resQueryColumn = [props.queryColumn as JxtechSearchFormColumn[]];
    }
    SearchFormState.resQueryColumn.forEach(columns =>
      columns.forEach(column => {
        SearchFormState.handleSearchColumn(column);
      })
    );
  },
  handleSearchColumn(column: JxtechSearchFormColumn) {
    if (column.type == "dictionarySelect" && column.codeItemId) {
      column.loadData = () => {
        return commonList(column.codeItemId || "");
      };
      column.selectValueType = { labelKey: "value", valueKey: "key" };
    } else if (column.type == "custom" && column.slot) {
      SearchFormState.slotArr.push(column.slot);
    }
  }
});
SearchFormState.init();

defineExpose({
  searchForm: () => searchForm(),
  resetForm: () => resetForm()
});
</script>
<template>
  <JxtechSearchForm ref="SerachFormRef" v-bind="{ ...props }" :query-column="props.queryColumn">
    <template v-for="item in SearchFormState.slotArr" #[item]="scope">
      <slot :name="item" :row="scope.row">{{ item }}未声明插槽</slot>
    </template>
  </JxtechSearchForm>
</template>
